<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0",maximum-scale=1.0, user-scalable=0>
    <link href="statoc/css/mui.css" rel="stylesheet">
</head>
<body>

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">选择支付方式 </h1>
</header>
<div class="mui-content" style="margin-top: 50px;">
    <p>支付金额：</p>
    <input type="tel" value="0.01" id ="price">
    <div id=" payList">
        <input type="button"  value="支付宝支付" id="zfbpay" class='pay'>
        <input type="button"  value="微信支付" id="wxpay" class='pay'>
    </div>
    <ul>
        <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            支付方式<span id = "channel"></span>
        </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
                支付金额<span id="total_fee"></span>
            </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
                订单号<span id="bill_no"></span>
            </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
                支付状态<span id ="stalus"></span>
            </a>
        </li>
    </ul>
</div>


<script src="static/css/mui.css"></script>
<script src="static/js/payment.js"></script>
<script type="text/javascript">
    mui.init();
    mui.plusRegister('payList',function(e){
        var price = document.getElementById('price'),
        total_fee = document.getElementById('total_fee'),
        channel = document.getElementById('channel'),
        bill_no = document.getElementById('bill_no'),
            stalus = document.getElementById('stalus');
        mui('#payList').on('tap','.pay',function(){
            var channel_id = null;
            switch (this.id){
                case 'zfbpay':
                    channel_id = "AL_APP"
                    break
                case 'wxpay':
                    channel_id = "WX_APP"
                    break
                default:
                    break
            }
            //构建给后端数据的数据结构
            fBeecloundPay(channel_id);

 ;           //支付金额
        total_fee.innerHTML = price.value;
        //支付方式
            channel.innerHTML = channel_id;
            //订单号
            bill_no.innerHTML = payment.orderNumber();
        })
        function  fBeecloundPay() {
            /*
            构建支付参数
            app_id          :APPID
            channel         :支付方式
            title           :商品标题
            total_fee       :支付金额
            bill_no         :订单号
            bill_timeout    :订单超时时间
           */
            var patData = {
                app_id: "44f01a13-965f-4b27-ba9f-da678b47f3f5",
                channel: '请求方式',
                title: '可可旅游网站',
                total_fee: parseFloat(price.value),
                bill_no: payment.orderNumber(),
                bill_timeout: 60,
            }
            //支付过程
            payment.payReq(patData, function () {
                //支付成功
                stalus.innerHTML="支付成功";
            }, function () {
                //支付失败
                stalus.innerHTML="支付失败";
            })
        }

    })
</script>

</body>
</html>